<template>
  <detail-layout :menus="menus" v-model:active="active" />
</template>

<script>
import * as Api from "@/api/wedding";

import DetailLayout from "@/components/detail-layout/index.vue";

export default {
  components: {
    DetailLayout,
  },
  data() {
    return {
      active: "",
      freehand_images: [],
      scene_images: [],
      videos: [],
    };
  },
  computed: {
    menus() {
      if (!this.active) return [];
      return [
        { key: "inspiration", name: "手绘灵感", data: this.freehand_images },
        { key: "image", name: "实景图片", data: this.scene_images },
        {
          key: "video",
          name: "实景视频",
          data: this.videos,
        },
      ].filter((item) => item.data.length);
    },
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const { id } = this.$route.params;
      const data = await Api.detail(id);
      const {
        freehand_images = [],
        scene_images = [],
        scene_videos = [],
      } = data;
      // this.active = !scene_videos.length ? 'image' : 'video';
      this.active = "inspiration";
      this.freehand_images = freehand_images;
      this.scene_images = scene_images;
      this.videos = scene_videos;
    },
  },
};
</script>

<style lang="less" scoped>
</style>